{% extends 'game_core/base.html' %}
{% load static %}

{% block content %}
<div class="skill-shop-container">
    <div class="character-info">
        <h2>技能商店</h2>
        <p>当前金币: {{ character.gold }}</p>
    </div>

    <div class="skills-grid">
        {% for skill in available_skills %}
        <div class="skill-card">
            <h3>{{ skill.name }}</h3>
            <p class="skill-type">{{ skill.get_skill_type_display }} - {{ skill.get_effect_type_display }}</p>
            <p class="skill-description">{{ skill.description }}</p>
            <div class="skill-stats">
                <p>基础等级: {{ skill.base_level }}</p>
                <p>最大等级: {{ skill.max_level }}</p>
                <p>冷却时间: {{ skill.cooldown }} 回合</p>
                <p>学习费用: {{ skill.cost }} 金币</p>
            </div>
            <form method="post" action="{% url 'game_core:learn_skill' %}">
                {% csrf_token %}
                <input type="hidden" name="skill_id" value="{{ skill.id }}">
                <button type="submit" class="learn-btn" {% if character.gold < skill.cost %}disabled{% endif %}>
                    学习技能
                </button>
            </form>
        </div>
        {% empty %}
        <p class="no-skills">已学习所有可用技能！</p>
        {% endfor %}
    </div>
</div>

<style>
    .skill-shop-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
    }

    .character-info {
        background: #f5f5f5;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .skills-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }

    .skill-card {
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .skill-type {
        color: #666;
        font-style: italic;
    }

    .skill-description {
        margin: 10px 0;
        color: #333;
    }

    .skill-stats {
        background: #f9f9f9;
        padding: 10px;
        border-radius: 4px;
        margin: 10px 0;
    }

    .learn-btn {
        width: 100%;
        padding: 10px;
        border: none;
        border-radius: 5px;
        background: #4CAF50;
        color: white;
        cursor: pointer;
        transition: background 0.3s;
    }

    .learn-btn:disabled {
        background: #cccccc;
        cursor: not-allowed;
    }

    .learn-btn:hover:not(:disabled) {
        background: #45a049;
    }

    .no-skills {
        grid-column: 1 / -1;
        text-align: center;
        padding: 20px;
        color: #666;
    }
</style>
{% endblock %} 